<template>
  <div class="manus-app">
    <div class="header">
      <div class="header-left">
        <el-button @click="router.push('/home')" type="text">
          <el-icon><ArrowLeft /></el-icon>
          返回首页
        </el-button>
      </div>
      <div class="header-center">
        <h1>AI 超级智能体</h1>
      </div>
      <div class="header-right">
        <span class="chat-id">会话ID: {{ chatId }}</span>
      </div>
    </div>
    <div class="chat-container">
      <ChatRoom
        :api-url="'http://localhost:8123/api/ai/manus/chat'"
        :chat-id="chatId"
        :aiType="'manus'"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import ChatRoom from '../components/ChatRoom.vue'
import {useRouter} from "vue-router";
const router = useRouter()
const chatId = ref('')

onMounted(() => {
  // 生成一个随机的聊天室 ID
  chatId.value = 'manus_' + Math.random().toString(36).substr(2, 9)
})
</script>

<style scoped>
.manus-app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #1a1a2e; /* 深色背景 */
}

.header {
  padding: 15px 20px; /* 调整内边距 */
  display: flex;
  align-items: center;
  justify-content: space-between; /* 使左右内容分散 */
  background-color: #583aca; /* 粉色背景 */
  color: #ffffff; /* 确保头部文字颜色 */
  flex-shrink: 0; /* 防止头部被压缩 */
}

.header-left .el-button {
  color: #ffffff; /* 返回按钮颜色改为白色 */
}

.header-left {
  flex: 1;
  text-align: left; /* 返回按钮靠左 */
}

.header-center {
  flex: 1;
  text-align: center;
}

.header-right {
  flex: 1;
  text-align: right;
}

h1 {
  margin: 0;
  font-size: 1.5em; /* 调整标题字号 */
  color: #ffffff; /* 标题颜色改为白色 */
}

.chat-id {
  font-size: 0.9em;
  opacity: 0.8;
}

.chat-container {
  flex: 1; /* 填充剩余空间 */
  //max-width: 800px; /* 聊天区域最大宽度 */
  width: 100%;
  margin: 0 auto; /* 居中 */
  background-color: #ffffff; /* 白色背景 */
  border-radius: 8px;
  overflow: hidden; /* 隐藏超出圆角部分 */
  display: flex; /* 使 ChatRoom 填充高度 */
  flex-direction: column; /* ChatRoom 内部内容按列排列 */
}

@media (max-width: 768px) {
  .header {
    padding: 10px;
  }

  .header-left,
  .header-right {
    flex: none; /* 移动端不拉伸 */
  }

  .header-center {
    flex: 1; /* 移动端标题占据中间 */
  }

  h1 {
    font-size: 1.2em;
  }

  .chat-id {
    display: none; /* 移动端隐藏会话ID */
  }

  .chat-container {
    max-width: 100%; /* 移动端聊天区域占满宽度 */
    margin: 0;
    border-radius: 0; /* 移动端移除圆角 */
  }
}
</style> 